<template>
  <div class="expert">
    <div class="layout">
      <div class="page-title">
        <span>专家介绍：</span>
      </div>
    </div>
    <div style="width:90%;margin:20px auto;padding:20px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane
          :label="item.zdmc"
          :name="item.zdbm"
          v-for="item in expertList"
          :key="item.zdbm"
          class="aaa"
        >
          <div
            v-for="doctorItem in doctorList"
            :key="doctorItem.YSXM"
            style="width:33%"
          >
            <div class="doctor">
              <div class="doctor-l"><img
                  :src="doctorItem.YSImg"
                  alt=""
                ></div>
              <div class="doctor-r">
                <p>{{doctorItem.YSXM}}</p>
                <p>职称：{{doctorItem.ZC}}</p>
                <p class="jieshao">介绍：{{doctorItem.JJ}}</p>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { getBaseAPI } from '@/api';
export default {
    data() {
        return {
            activeName: '2111',
            expertList: [],
            doctorList: []
        };
    },
    mounted() {
        this.exportsData();
        this.handleClick({ name: '2111' });
    },
    methods: {
        // 获取科室列表
        async exportsData() {
            const res = await getBaseAPI({
                cxlx: 'Query_zdks',
                zdbm: 'null'
            });
            if (res.code == 'succ') {
                this.expertList = res.result;
            }
        },
        // 获取医生数据
        async handleClick(tab, event) {
            const res = await getBaseAPI({
                cxlx: 'Query_ksys',
                zdbm: tab.name
            });
            if (res.code == 'succ') {
                this.doctorList = res.result;
            } else {
                this.doctorList = [];
            }
        }
    }
};
</script>
<style scoped>
.expert {
    width: 100%;
    min-height: 100vh;
    font-size: 1.3rem;
}
.aaa {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.jieshao {
    line-height: 24px;
    /* width: 200px; */
    height: 48px;
    overflow: hidden;
    position: relative;
}
.jieshao:after {
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0;
    background: #fff;
    padding-left: 10px;
}
.doctor {
    display: flex;
    align-items: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 10px;
    margin: 10px;
}
.doctor-l {
    margin-right: 20px;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
    font-size: 1.3rem !important;
}
</style>